<template>
  <div class="grade-list">
    <div class="list-header">
      <h2>成绩列表</h2>
      <div class="header-actions">
        <el-button type="primary" @click="createGrade">
          <el-icon><Plus /></el-icon>
          添加成绩
        </el-button>
      </div>
    </div>

    <el-card>
      <el-table :data="grades" v-loading="loading" stripe>
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="student" label="学生" width="120" />
        <el-table-column prop="exam" label="考试" width="150" />
        <el-table-column prop="score" label="分数" width="100" />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="row.status === 'published' ? 'success' : 'warning'">
              {{ row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template #default="{ row }">
            <el-button size="small" @click="editGrade(row)">编辑</el-button>
            <el-button size="small" type="danger" @click="deleteGrade(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import { gradingApi } from '@/api'

const loading = ref(false)
const grades = ref([])

const fetchGrades = async () => {
  loading.value = true
  try {
    const response = await gradingApi.getGradeSheets()
    grades.value = response.data?.results || []
  } catch (error) {
    console.error('获取成绩列表失败:', error)
  } finally {
    loading.value = false
  }
}

const createGrade = () => {
  ElMessage.info('创建成绩功能开发中')
}

const editGrade = (grade: any) => {
  ElMessage.info('编辑成绩功能开发中')
}

const deleteGrade = async (grade: any) => {
  try {
    await gradingApi.deleteGradeSheet(grade.id)
    ElMessage.success('删除成功')
    await fetchGrades()
  } catch (error) {
    ElMessage.error('删除失败')
  }
}

onMounted(() => {
  fetchGrades()
})
</script>

<style scoped lang="scss">
.grade-list {
  padding: 20px;
}

.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;

  h2 {
    margin: 0;
    color: #303133;
  }
}
</style>